<template>
  <div class="notification-list">
    <el-popover
      placement="bottom-end"
      :width="320"
      trigger="click"
      popper-class="notification-popover"
    >
      <template #reference>
        <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-badge">
          <el-button
            :icon="Bell"
            circle
            size="large"
            class="notification-button"
          />
        </el-badge>
      </template>
      
      <div class="notification-content">
        <div class="notification-header">
          <h4>通知中心</h4>
          <el-button
            type="text"
            size="small"
            @click="markAllAsRead"
            :disabled="unreadCount === 0"
          >
            全部已读
          </el-button>
        </div>
        
        <div class="notification-body">
          <el-scrollbar height="300px">
            <div v-if="notifications.length === 0" class="empty-state">
              <el-empty description="暂无通知" :image-size="80" />
            </div>
            <div v-else>
              <div
                v-for="notification in notifications"
                :key="notification.id"
                class="notification-item"
                :class="{ 'unread': !notification.isRead }"
                @click="markAsRead(notification.id)"
              >
                <div class="notification-icon">
                  <el-icon :size="16" :color="getNotificationColor(notification.type)">
                    <component :is="getNotificationIcon(notification.type)" />
                  </el-icon>
                </div>
                <div class="notification-content">
                  <div class="notification-title">{{ notification.title }}</div>
                  <div class="notification-message">{{ notification.message }}</div>
                  <div class="notification-time">{{ formatTime(notification.createdTime) }}</div>
                </div>
                <div v-if="!notification.isRead" class="unread-dot"></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        
        <div class="notification-footer">
          <el-button type="text" size="small" @click="viewAllNotifications">
            查看全部
          </el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { Bell, InfoFilled, SuccessFilled, WarningFilled, CircleCloseFilled } from '@element-plus/icons-vue'

export default {
  name: 'NotificationList',
  components: {
    Bell,
    InfoFilled,
    SuccessFilled,
    WarningFilled,
    CircleCloseFilled
  },
  setup() {
    const notifications = ref([
      {
        id: 1,
        type: 'success',
        title: '申请通过',
        message: '您的社团加入申请已通过审核',
        isRead: false,
        createdTime: new Date(Date.now() - 1000 * 60 * 30) // 30分钟前
      },
      {
        id: 2,
        type: 'info',
        title: '活动提醒',
        message: '明天下午2点有社团活动，请准时参加',
        isRead: false,
        createdTime: new Date(Date.now() - 1000 * 60 * 60 * 2) // 2小时前
      },
      {
        id: 3,
        type: 'warning',
        title: '系统维护',
        message: '系统将于今晚22:00-24:00进行维护',
        isRead: true,
        createdTime: new Date(Date.now() - 1000 * 60 * 60 * 24) // 1天前
      }
    ])

    const unreadCount = computed(() => {
      return notifications.value.filter(n => !n.isRead).length
    })

    const getNotificationIcon = (type) => {
      const iconMap = {
        success: 'SuccessFilled',
        info: 'InfoFilled',
        warning: 'WarningFilled',
        error: 'CircleCloseFilled'
      }
      return iconMap[type] || 'InfoFilled'
    }

    const getNotificationColor = (type) => {
      const colorMap = {
        success: '#67c23a',
        info: '#409eff',
        warning: '#e6a23c',
        error: '#f56c6c'
      }
      return colorMap[type] || '#409eff'
    }

    const formatTime = (time) => {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / (1000 * 60))
      const hours = Math.floor(diff / (1000 * 60 * 60))
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))

      if (minutes < 60) {
        return `${minutes}分钟前`
      } else if (hours < 24) {
        return `${hours}小时前`
      } else {
        return `${days}天前`
      }
    }

    const markAsRead = (id) => {
      const notification = notifications.value.find(n => n.id === id)
      if (notification) {
        notification.isRead = true
      }
    }

    const markAllAsRead = () => {
      notifications.value.forEach(n => {
        n.isRead = true
      })
    }

    const viewAllNotifications = () => {
      // 跳转到通知详情页面
      console.log('跳转到通知详情页面')
    }

    onMounted(() => {
      // 这里可以添加获取通知数据的逻辑
    })

    return {
      notifications,
      unreadCount,
      getNotificationIcon,
      getNotificationColor,
      formatTime,
      markAsRead,
      markAllAsRead,
      viewAllNotifications
    }
  }
}
</script>

<style lang="scss" scoped>
.notification-list {
  .notification-badge {
    :deep(.el-badge__content) {
      background-color: #f56c6c;
    }
  }

  .notification-button {
    border: none;
    background: transparent;
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
}

.notification-content {
  .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 12px;

    h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .notification-body {
    .empty-state {
      text-align: center;
      padding: 20px 0;
    }

    .notification-item {
      display: flex;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f7fa;
      }

      &:last-child {
        border-bottom: none;
      }

      &.unread {
        background-color: #f0f9ff;
      }

      .notification-icon {
        margin-right: 12px;
        margin-top: 2px;
      }

      .notification-content {
        flex: 1;
        min-width: 0;

        .notification-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
          line-height: 1.4;
        }

        .notification-message {
          font-size: 13px;
          color: #606266;
          margin-bottom: 4px;
          line-height: 1.4;
          word-break: break-all;
        }

        .notification-time {
          font-size: 12px;
          color: #909399;
        }
      }

      .unread-dot {
        width: 8px;
        height: 8px;
        background-color: #f56c6c;
        border-radius: 50%;
        margin-left: 8px;
        margin-top: 6px;
        flex-shrink: 0;
      }
    }
  }

  .notification-footer {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;
  }
}

:deep(.notification-popover) {
  padding: 0;
}
</style>
